<template>
  <div class="PersonInfo">
    <div class="titleBox">
      <div class="title">
        <div class="titleOne">员工相关信息</div>
        <div  @click="returnPrevious" class="titleTwo">返回</div>
      </div>
      <div class="headerImg">
        <img @click="turnDown" src="@/assets/headerImg/down.png" class="imgOne">
        <img @click="close" src="@/assets/headerImg/x.png">
      </div>
    </div>
    <div class="tableBox">
      <el-table
        :data="personInfo"
        border
        stripe
        style="width:94%;margin:auto;"
        :default-sort = "{prop: 'date', order: 'descending'}"
        >
        <el-table-column
          prop="eid"
          label="编号"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="ename"
          label="姓名"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="esex"
          label="性别"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="ephone"
          label="电话"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="eheight"
          label="身高"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="eweight"
          label="体重"
          min-width="100">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
  export default {
    name: 'PersonInfo',
    data () {
      return {
        turn: false,
        personInfo: []
      }
    },
    computed: {
      ...mapState('Information',['isTrue']),
      isTrue:{
        get(){
          return this.$store.state.Information.isTrue
        },
        set(val){
          return this.$store.state.Information.isTrue = val
        }
      }
    },
    mounted () {
      this.getInfo(this.$route.params.eid)
    },
    methods: {
      getInfo(eid){
        this.$axios({
          url:`http://132.232.110.185/personnelManagement/department/showEmployeeById/${eid}`,
          method:'GET'
        }).then(
          response => {
            // console.log(response.data.data);
            this.personInfo.push(response.data.data)
          },
          error => {
            console.log('员工信息获取失败');
            console.log(error);
          }
        )
      },
      turnDown(e){
        if(!this.turn){
          e.target.style.transform = 'rotate(180deg)'
          this.turn = true
          // e.target.parentNode.parentNode.parentNode.style.height = '50px'
          // e.target.parentNode.parentNode.parentNode.style.overflow = 'hidden'
        }else{
          e.target.style.transform = 'rotate(0deg)'
          this.turn = false
          // e.target.parentNode.parentNode.parentNode.style.height = '600px'
        }
      },
      close(e){
        e.target.parentNode.parentNode.parentNode.style.visibility = 'hidden'
      },
      returnPrevious(){
        this.$router.back()
        this.isTrue = true
      }
    }
  }
</script>

<style scoped>
  .PersonInfo{
    width: 96%;
    margin: auto;
  }
  .titleBox{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .title{
    width: 150px;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .titleOne{
    height: 50px;
    line-height: 50px;
    font-weight: 700;
    color: gray;
  }
  .titleTwo{
    height: 50px;
    line-height: 50px;
    font-weight: 700;
    color: red;
  }
  .headerImg{
    padding-top: 15px;
    width: 70px;
    height: 50px;
  }
  img{
    margin-left: 15px;
    width: 20px;
    height: 20px;
  }
  .imgOne{
    transition: all linear 0.3s;
  }
  .tableBox{
    width: 100%;
  }
</style>